<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-06-26 09:11:55
 * @LastEditors: your name
 * @LastEditTime: 2024-06-27 14:46:58
-->
<template>
    <a-modal v-model:open="open" title="编辑业主信息" @ok="Submit" @cancel="onCancel" :width="700" okText="提交" cancelText="取消">
        <a-form :model="formState" :rules="rules">
            <h3 style="text-align: center; margin-bottom: 20px">业主信息</h3>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="业主姓名">
                        <a-input v-model:value="formState.ownerName" style="width: 200px" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="业主性别">
                        <a-select v-model:value="formState.ownerSex" style="width: 200px" :options="sexOption" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="身份证号">
                        <a-input v-model:value="formState.idCard" style="width: 200px" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="手机号码">
                        <a-input v-model:value="formState.phoneNum" style="width: 200px" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-form-item label="家庭住址" name="nativePlace" style="width:600px">
                    <a-textarea v-model:value="formState.nativePlace" />
                </a-form-item>
            </a-row>

            <a-form-item label="业主头像" name="ownerImg">
                <div style="display: flex;">
                    <a-image v-if="formState.ownerImg !== ''" :width="30"
                        :src="'http://127.0.0.1:8090/' + formState.ownerImg" />
                        <!-- antd的upload会遇到跨域问题，需要手动设置请求头 -->
                    <a-upload :headers="{
                        'X-Requested-With': null
                    }" :maxCount="1" name="file" list-type="picture-card" style="margin-left: 20px;"
                        class="avatar-uploader" :show-upload-list="false" action="http://127.0.0.1:8090/api/v1/upload"
                        @change="(info)=>{handleUpload(info,'ownerImg')}">
                        <div class="ant-upload-text">{{ formState.ownerImg !== '' ? '重新上传' : '上传' }}</div>
                    </a-upload>
                </div>
            </a-form-item>


            <h3 style="text-align: center; margin-bottom: 20px">房屋信息</h3>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="房屋类型" name="houseType">
                        <a-input v-model:value="formState.houseType" style="width: 200px" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="房屋面积" name="builtArea">
                        <a-input v-model:value="formState.builtArea" style="width: 200px" suffix="㎡"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="房屋朝向" name="orientation">
                        <a-input v-model:value="formState.orientation" style="width: 200px" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="物业类型" name="propertyType">
                        <a-select v-model:value="formState.propertyType" style="width: 200px" :options="propertyOption" />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-form-item label="房屋号码" name="houseAddress">
                <a-input v-model:value="formState.houseAddress" disabled style="width: 200px" />
            </a-form-item>
            <a-form-item label="户型图" name="houseImg">
                <div style="display: flex;">
                    <a-image v-if="formState?.houseImg" :width="37" :src="'http://127.0.0.1:8090/' + formState.houseImg" />
                    <a-upload :headers="{
                        'X-Requested-With': null
                    }" :maxCount="1" name="file" list-type="picture-card" style="margin-left: 20px;"
                        class="avatar-uploader" :show-upload-list="false" action="http://127.0.0.1:8090/api/v1/upload"
                        @change="(info)=>{handleUpload(info,'houseImg')}">
                        <div class="ant-upload-text">{{ formState.houseImg !== '' ? '重新上传' : '上传' }}</div>
                    </a-upload>
                </div>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import {message} from 'ant-design-vue'
import {updateInfo} from '@/api/api'
import _ from 'lodash'

// 监听props的变化，更新form数据
const props = defineProps({
    formData: {
        type: Object,
        default: {}
    },
    formOpen: {
        type: Boolean,
        default: false
    }
})

watch(() => props.formData, (val) => {
    if (Object.keys(val).length) {
        const newData = Object.assign(initialFormData, val)
        for (let key in newData) {
            if (Object.keys(formState).includes(key)) {
                formState[key] = newData[key]
            }
        }
    }
})

watch(() => props.formOpen, val => {
    open.value = val
})

const imageUrl = ref('')
const loading = ref(false)
const initialFormData = {
    ownerName: '',
    ownerSex: '',
    idCard: '',
    phoneNum: '',
    nativePlace: '',
    ownerImg: '',
    houseType: '',
    builtArea: '',
    orientation: '',
    propertyType: '',
    houseAddress: '',
    houseImg: '',
    id:''
}
const formState = reactive(_.cloneDeep(initialFormData))

const sexOption = [
    {
        value: '男',
        label: '男'
    }, {
        value: '女',
        label: '女'
    }
]

const propertyOption = [
    {
        value: '1',
        label: '居民物业'
    }, {
        value: '2',
        label: '商业物业'
    }, {
        value: '3',
        label: '工业物业'
    }, {
        value: '4',
        label: '其他物业'
    }
]

const rules = {
    ownerName: [
        {
            required: true,
            message: '请输入姓名',
            trigger: 'change',
        },
        {
            min: 2,
            max: 5,
            message: 'Length should be 2 to 5',
            trigger: 'blur',
        }
    ],
    idCard: [
        {
            required: true,
            message: '请输入身份证号',
            trigger: 'change',
        }, {
            min: 18,
            max: 18,
            message: '请输入18位身份证号',
            trigger: 'blur',
        }
    ]
}

const open = ref(false)

const Submit = async () => {
    const res=await updateInfo(formState)
    if(res.code===200){
        message.success('提交成功')
        onCancel()
    }
}

const emits = defineEmits(['onClose'])
const onCancel = () => {
    open.value = false
    emits('onClose')
}

// 图片上传
const handleUpload = (info,type) => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        // 获取图片地址
        formState[type]=info.file.response.data
    }
    if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
    }
}
</script>
<style>
.ant-upload-select-picture-card i {
    font-size: 16px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select {
    height: 40px;
}
</style>